<template>
  <div class="tw-libchart">
    <div v-show="data.length>0"
      class="tw-datasetchart"
      ref="chart"
      :style="{height: height, backgroundColor: bgColor}">
    </div>

    <tw-lib-nodata v-show="data.length===0" />
  </div>
</template>

<script>
import props from './props'
import chartMixins from '../tw-lib-base/chart/chart'

export default {
  name: 'chart-line-base',

  mixins: [chartMixins],

  props,

  data() {
    return {
      chartType: 'line'
    }
  },

  computed: {
    yNamePad () {
      if (this.yNamePadding instanceof Array) {
        return this.yNamePadding
      } else if (this.yNamePadding === '') {
        return []
      } else {
        let name = this.yNamePadding.split(',')
        let label = []
        for (let i = 0; i < name.length; i++) {
          if (name[i]) {
            label.push(parseInt(name[i]))
          } else {
            label.push(0)
          }
        }
        return label
      }
    },
    xNamePad () {
      if (this.xNamePadding instanceof Array) {
        return this.xNamePadding
      } else if (this.xNamePadding === '') {
        return []
      } else {
        let name = this.xNamePadding.split(',')
        let label = []
        for (let i = 0; i < name.length; i++) {
          if (name[i]) {
            label.push(parseInt(name[i]))
          } else {
            label.push(0)
          }
        }
        return label
      }
    }
  },

  methods: {
    setSeries () {
      // console.log('data', this.data)
      let vm = this
      let length = 0
      let lineData = []
      if (this.seriesIsRow) {
        length = this.data.length
        if (this.lineName === '' && length > 0) {
          lineData = [this.data[length - 1][0]]
        } else if (this.lineName) {
          lineData = this.lineName.split(',')
        }
      } else {
        length = 0
        if (this.data.length > 0) {
          length = this.data[0].length
          if (this.lineName === '') {
            lineData = [this.data[0][length - 1]]
          } else if (this.lineName) {
            lineData = this.lineName.split(',')
          }
        }
      }

      this.series = []
      for (let i = 1; i <= length - 1; i++) {
        let series = {}
        if (this.seriesIsRow) {
          series = {
            type: this.chartType,
            seriesLayoutBy: this.seriesIsRow ? 'row' : 'column',
            lineStyle: {
              type: lineData.includes(this.data[i][0]) ? this.lineType : 'solid',
            },
            smooth: this.isSmooth
          }
        } else {
          let n = (i - 1) % this.colors.length
          if (this.lineStyleWidth) {
            series = {
              type: this.chartType,
              seriesLayoutBy: this.seriesIsRow ? 'row' : 'column',
              lineStyle: {
                type: lineData.includes(this.data[0][i]) ? this.lineType : 'solid',
                width: this.lineStyleWidth,
                color: this.isGradientsLine ? {
                  type: 'linear',
                  colorStops: [{
                    offset: 0,
                    color: vm.grcolors[2 * (i - 1)] // 0% 处的颜色
                  }, {
                    offset: 1,
                    color: vm.grcolors[2 * (i - 1) + 1] // 100% 处的颜色
                  }],
                  globalCoord: false // 缺省为 false
                } : this.colors[n],
              },
              itemStyle: {
                borderWidth: this.lineBorderWidth === '' ? null : this.lineBorderWidth,
                borderColor: this.lineBorderColor === '' ? null : this.lineBorderColor
              },
              smooth: this.isSmooth
            }
          } else {
            series = {
              type: this.chartType,
              seriesLayoutBy: this.seriesIsRow ? 'row' : 'column',
              itemStyle: {
                borderWidth: this.lineBorderWidth === '' ? null : this.lineBorderWidth,
                borderColor: this.lineBorderColor === '' ? null : this.lineBorderColor
              },
              smooth: this.isSmooth
            }
          }
        }

        let cusSeries = {}
        if (this.useSeries && this.funcSeries !== '' && typeof this.funcSeries === 'function') {
          cusSeries = this.funcSeries(i, this)
        }
        Object.assign(series, {}, cusSeries)
        this.series.push(series)
      }

      if (this.extendOption && this.funcExtOption !== '' && typeof this.funcExtOption === 'function') {
        this.funcExtOption(this)
      }
    }
  },

  watch: {
    seriesIsRow () {
      this.setSeries()
    },
    isSmooth () {
      this.setSeries()
    },
    lineType () {
      this.setSeries()
    },
    lineName () {
      this.setSeries()
    },
    lineStyleWidth () {
      this.setSeries()
    },
    isGradientsLine () {
      this.setSeries()
    },
    grcolors: {
      deep: true,
      handler () {
        this.setSeries()
      }
    },
    lineBorderWidth () {
      this.setSeries()
    },
    lineBorderColor () {
      this.setSeries()
    },
    useSeries () {
      this.setSeries()
    },
    extendOption () {
      this.setSeries()
    },
  }
}
</script>

<style lang="scss">
  @import './css/index.scss';
</style>
